<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容弹窗动画</title>
</head>
<body>
    <div class="main">
        <a href="#terrestrial" class="open-popup">terrestrial animals</a>
        <a href="#aquatic" class="open-popup">aquatic animals</a>
    </div>
    <section id="terrestrial" class="popup">
        <a href="#" class="back">&lt;back</a>
        <p>🐅🐆🐘🦏🐃🦌🐐🐫</p>
    </section>
    <section id="aquatic" class="popup">
        <a href="#" class="back">&lt; back</a>
        <p>🐋🐳🐬🐟🐠🐡🐙🦑🦐🦀</p>
    </section>
</body>
<style>
    /*<!--页面基础属性-->*/
    body{
        margin: 0;
        height: 100vh;
        overflow: hidden;
    }
    .main{
        height: inherit;
        background: linear-gradient(dodgerblue,darkblue);
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .open-popup{
        /*改成IE盒子*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: white;
        font-size: 16px;
        font-family: sans-serif;
        width: 10em;
        height: 4em;
        border: 1px solid;
        text-align: center;
        line-height: 4em;
        text-decoration: none;
        /*转换文本 capitalize为首字母大写*/
        text-transform: capitalize;
        margin: 1em;
    }
    .open-popup:hover{
        border-width: 2px;
    }
    .popup {
        position: absolute;
        top: 0;
        width: 100%;
        height: inherit;
        /*display: flex;*/
        flex-direction: column;
        justify-content: start;
    }
    .popup .back{
        font-size: 20px;
        font-family: sans-serif;
        text-align: center;
        height: 2em;
        line-height: 2em;
        background-color: #dddddd;
        color: black;
        text-decoration: none;
    }

    .popup .back:visited{
        color: black;
    }
    .popup .back:hover{
        background-color: #eee;
    }
    .popup p{
        font-size: 100px;
        text-align: center;
        margin:0.1em 0.05em;
    }
    .popup{
        display: none;
    }
    .popup:target{
        display: flex;
    }

    .popup >*{
        filter:opacity(0);
        /*forwards当动画完成后保持最后一个属性值
        因为元素开始时是display none，所以要保持最后一个状态才能让画面一直呈现
        */
        animation: fade 0.5s ease-in forwards;
        animation-delay: 1s;
    }
    @keyframes fade{
        to{
            filter: opacity(1);
        }
    }
    /*制作一个白色背景*/
    .popup::before{
        content: '';
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 0;
        top: 50%;
        background-color: white;
        -webkit-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        -o-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        animation-delay: 0.5s;
    }
    @keyframes open-animate {
        to{
            height:100vh;
            top:0;
        }
    }
    /*制作一条横线，从页面左端横穿到右端*/
    .popup::after{
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: white;
        top: calc((100% - 2px) / 2);
        left: 0;
        -webkit-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
        -o-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
        animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
    }
    @keyframes line-animate{
        50%,100%{
            width: 100%;
        }
    }
</style>
</html>